<template>
  <div class="container">
    <Header title="购物车" fontColor="black" bgColor="green" />
    <div class="list" style="padding: 40px 0 50px">
      <Goods v-for="obj in list" :key="obj.id" :goodsObj="obj" />
    </div>
    <Footer
      @toggle-all="babaToggleAllFn"
      :isAllChecked="isAllSelected"
      :allCount="totalCount"
      :allPrice="totalPrice"
    />
  </div>
</template>

<script>
import Header from "./components/MyHeader/index";
import Goods from "./components/MyGoods/index";
import Footer from "./components/MyFooter/index";
export default {
  data() {
    return {
      list: [],
    };
  },
  components: {
    Header,
    Goods,
    Footer,
  },
  async created() {
    const resp = await this.$http({
      metthod: "GET",
      url: "/api/cart",
    });
    this.list = resp.data.list;
  },
  computed: {
    isAllSelected() {
      return this.list.every((item) => item.goods_state);
    },
    totalCount() {
      return this.list.reduce((sum, obj) => {
        if (obj.goods_state) {
          sum += obj.goods_count;
        }
        return sum;
      }, 0);
    },
    totalPrice() {
      return this.list.reduce((sum, obj) => {
        if (obj.goods_state) {
          sum += obj.goods_count * obj.goods_price;
        }
        return sum;
      }, 0);
    },
  },
  methods: {
    babaToggleAllFn(checked) {
      this.list.forEach((item) => (item.goods_state = checked));
    },
  },
};
</script>

<style>
</style>